debounce 是一種程式設計模式，它用於減少一些特定函數的執行頻率。當一個持續觸發的事件（例如鍵盤敲擊或窗口大小改變）被連續觸發時，debounce 可以延遲函數的執行直到事件停止觸發一段時間後。

怎麼做的

debounce 的工作原理是，每次事件被觸發時，它都會重新設置一個計時器。只有在事件停止被觸發並且計時器達到了所設定的延遲時間後，函數才會被執行。如果在計時器達到所設定的延遲時間之前事件再次被觸發，計時器會被重置。

範例

假設有一個搜尋用戶的輸入欄位，每當使用者在輸入欄位中鍵入字符時，就會觸發一個搜尋函數。如果沒有使用 debounce，每鍵入一個字符就會觸發一次搜尋函數，這可能會導致性能問題，並且不必要地占用伺服器資源。使用 debounce 可以在用戶停止鍵入一段時間後，才觸發搜尋函數，從而減少不必要的函數調用。

import { useRef, useCallback } from "react";

export function useDebouncedCallback<T extends (...args: any[]) => any>(
  callback: T,
  delay: number
) {
  const timerIdRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const debouncedCallback = useCallback(
    (...args: Parameters<T>) => {
      if (timerIdRef.current !== null) {
        clearTimeout(timerIdRef.current);
      }

      timerIdRef.current = setTimeout(() => {
        callback(...args);
      }, delay);
    },
    [callback, delay]
  );

  return debouncedCallback;
}

ReturnType 是 TypeScript 中的一個實用類型，它可以獲得一個函數的返回類型。換句話說，它會提取函數的返回值的類型。

T extends (...args: any[]) => any> 表示泛型 T 必須是一個函數，這個函數可以接受任意數量和類型的參數，並且可以返回任何類型的值。